<template>
    <view class="mine" style="position: relative">
        <view class="index">
            <!-- 头像 -->
            <view class="avatar">
                <view class="dis_f_sb_c">
                    <view class="avatar-box" style="flex: 1">
                        <u-image width="120rpx" height="120rpx" :src="myInfoVo.wxAvatar" @click="handleAvatar" v-if="myInfoVo.wxAvatar" shape="circle"></u-image>
                        <u-image width="120rpx" height="120rpx" src="/static/img/avatar.png" @click="handleAvatar" shape="circle" v-else></u-image>
                        <view class="userId">
                            <view class="phonenumber" @click="handleAvatar"> {{userInfo.nickName}} </view>
                            <view class="info"> {{userInfo.phonenumber}} </view>
                        </view>
                    </view>
                </view>

                <view class="p_10 m_t_20 vip_box dis_f_sb_c c_f"  @click="handleToVip">
                    <view class="dis_f_l_c ">
                        <view class="f_w_b f_s_20">VIP</view>
                        <view class=" m_l_10">
                            <view class="f_s_16 dis_f_l_c">
                                会员卡
                                <!--                                <view class="f_s_12 m_l_10" v-if="userInfo.ifhy" > 剩余{{userInfo.hyNumber}}次</view>-->
                            </view>
                            <view class="f_s_12 m_t_5" v-if="!userInfo.ifhy">充值会员后可发布信息</view>
                            <view class="f_s_12 m_t_5" v-else > 有效期至 {{userInfo.gqTime}}</view>
                        </view>
                    </view>
                    <view>
                        <u-button v-if="!userInfo.ifhy" type="primary" color="#a96c07" size="small" shape="circle">立即开通</u-button>
                    </view>
                </view>
            </view>
            <view class="card_box p_10 m_t_20">
                <u-cell-group :border="false">
                    <u-cell icon="phone" isLink title="客服电话" @click="showPhone=true"></u-cell>
                    <u-cell icon="weixin-fill" isLink title="客服微信" @click="showKfWx=true"></u-cell>
                    <u-cell icon="question-circle-fill" isLink title="常见问题" @click="handleToagreement"></u-cell>
                </u-cell-group>
            </view>
        </view>
        <u-popup :show="showPhone" @close="showPhone = false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="qrcode" style="margin: 40rpx;" @click="handleCall">
                <view class="phone">
                    <u-icon :customStyle="{paddingTop:10+'rpx'}" name="phone" :size="18"></u-icon>
                    <text>{{phone}}</text>
                </view>
                <text class="desc">点击拨打客服电话</text>
            </view>
        </u-popup>
        <!--    客服二维码    -->
        <u-popup :show="showKfWx" @close="showKfWx=false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view style="padding: 30rpx;">
                <u-image width="300rpx" height="300rpx" :src="kfWx"></u-image>
                <view class="dis_f_c_c f_s_16 m_t_10 c_9">长按保存二维码</view>
            </view>
        </u-popup>
        <!-- 用户昵称和图像 -->
        <s-wx-auth ref="authRef" @getMyInfo="getMyInfo"></s-wx-auth>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {getMyInfoApi, getByKeyApi, auditApi, getUnReadApi, uploadResumeApi} from "@/sheep/api/index";
import {mapGetters, mapMutations} from "vuex";
import {baseUrl} from "@/sheep/request/baseUrl";

export default {
    data() {
        return {
            isUp:0,
            showKfWx: false,
            kfWx: '',
            fileList1: [],
            isAll: 0,
            isCash: false,
            timer: null,
            phone: "",
            showQrCode: false,
            showAudit: false,
            titleHeight: 0,
            customTop: 0,
            paramsPage: {
                pageNum: 1,
                pageSize: 10,
            },
            myInfoVo: {},
            showPhone: false,
            orderTab: [
                {name: "全部", value: 2, imgUrl: "/static/img/order-1.png"},
                {name: "派送中", value: 3, imgUrl: "/static/img/order-2.png"},
                {name: "待收货", value: 4, imgUrl: "/static/img/order-5.png"},
                {name: "已完成", value: 5, imgUrl: "/static/img/order-3.png"},
                // { name: "购物车", imgUrl: "/static/img/order-4.png" },
            ],
            goodsTab: [
                {name: "去发布", imgUrl: "/static/img/goods1.png"},
                {name: "任务列表", imgUrl: "/static/img/goods2.png"},
                {name: "派送中", imgUrl: "/static/img/goods3.png"},
                {name: "已完成", imgUrl: "/static/img/goods4.png"},
            ],
            cash: {
                alipay: "",
                balance: "",
            },
            rules: {
                alipay: {
                    type: "string",
                    required: true,
                    message: "请填写收款账号",
                    trigger: ["blur", "change"],
                },
                balance: {
                    type: "number",
                    required: true,
                    message: "请填写提现金额",
                    trigger: ["blur", "change"],
                },
            },
        };
    },
    onLoad() {
        this.getHeight();
        this.getPhone();
        this.getIsCash();
        this.getIsAll();
        this.getwx();
    },
    onShow() {
        this.getMyInfo();
        this.getIsUp();

    },
    onHide() {
        // 清除定时器
        clearInterval(this.timer);
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        ...mapMutations({
            setUserInfo: "user/setUserInfo",
        }),
        handleToagreement(){
            uni.navigateTo({
                url: "/pages/agreement/index?type=1",
            });
        },
        async getIsUp() {
            let res = await getByKeyApi("is_up");
            this.isUp = res.data[0].configValue;
        },
        handleToSend() {
            uni.navigateTo({
                url: "/pages/mine/mySend",
            });
        },
        handleToPrizeDraw() {
            uni.navigateTo({
                url: "/pages/prizeDraw/index",
            });
        },
        handleToLike() {
            uni.navigateTo({
                url: "/pages/mine/myLike",
            });
        },
        handleToRealName() {
            uni.navigateTo({
                url: "/pages/mine/realName",
            });
        },
        handleToProtocol(e) {
            uni.navigateTo({
                url: '/pages/agreement/index?type=' + e
            })
        },
        handleToAboutUs(type) {
            uni.navigateTo({
                url: "/pages/mine/aboutUs?type=" + type,
            });
        },
        handleToVip() {
            uni.navigateTo({
                url: "/pages/mine/vipList",
            });
        },
        handleToIssue() {
            uni.navigateTo({
                url: "/pages/mine/addIssue",
            });
        },
        handleToCommission() {
            uni.navigateTo({
                url: "/pages/mine/commissionList",
            });
        },
        handleToDistribution() {
            uni.navigateTo({
                url: "/pages/mine/distributionList",
            });
        },
        handleExit() {
        },
        handleAvatar() {
            this.$refs.authRef.open(this.myInfoVo.nickName, this.myInfoVo.wxAvatar);
        },
        handleCashRecord(type) {
            uni.navigateTo({
                url: "/pages/cashRecord/index?type=" + type,
            });
        },
        handleToPdf() {
            uni.navigateTo({
                url: "/pages/index/pdf?url=" + this.myInfoVo.pdfUrl,
            });
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + 10;
            this.customTop = res.top + 3;
        },
        // 提现
        handleConfirm() {
            this.$refs.uForm.validate().then((res) => {
                auditApi(this.cash).then((res) => {
                    if (res.code === 200) {
                        this.showAudit = false;
                        this.getMyInfo();
                    }
                });
            })
                .catch((errors) => {
                    console.log(errors);
                });
        },
        handlePdfCancel() {
            this.pdfShow = false
        },
        handlePdfConfirm() {
            let pdf = ''
            if (this.fileList1.length == 0) {
                uni.showToast({
                    title: '请上传简历',
                    icon: 'none'
                })
                return
            }
            if (Array.isArray(this.fileList1)) {
                if (this.fileList1.length > 0) {
                    this.fileList1.forEach((item, index) => {
                        if (index === 0) {
                            pdf = item.ossId;
                        } else {
                            pdf = pdf + "," + item.ossId;
                        }
                    });
                } else {
                    pdf = "";
                }
            }
            uploadResumeApi({pdf: pdf, userId: this.myInfoVo.userId}).then(res => {
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
                this.pdfShow = false
                this.getMyInfo()
            })
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.myInfoVo = res.data;
                this.setUserInfo(this.myInfoVo);
            });
        },
        copy(value) {
            uni.setClipboardData({
                data: value,
                success: function () {
                    uni.showToast({
                        title: "复制成功",
                        icon: "none",
                    });
                },
            });
        },
        handleOrder(index) {
            uni.navigateTo({
                url: "/pages/order/index?type=" + index,
            });
        },
        handlerMyGoods(index) {
            if (index == 3) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=6",
                });
            } else if (index == 2) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=4",
                });
            } else if (index == 1) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=0",
                });
            } else if (index == 0) {
                uni.navigateTo({
                    url: "/pages/mine/goodRelease",
                });
            }
        },
        handleCall() {
            uni.makePhoneCall({
                phoneNumber: this.phone,
            });
        },
        async getPhone() {
            let res = await getByKeyApi("phone");
            this.phone = res.data[0].configValue;
        },
        async getwx() {
            let res = await getByKeyApi("kf_wx");
            this.kfWx = res.data[0].url;
        },
        async getIsCash() {
            let res = await getByKeyApi("is_cash");
            this.isCash = res.data[0].configValue == 1;
        },
        async getIsAll() {
            let res = await getByKeyApi("is_all");
            this.isAll = res.data[0].configValue;
        },
        // 上传图片
        async afterRead(event) {
            let lists = [].concat(event.file);
            console.log("lists", lists);
            console.log(" this[`fileList${event.name}`]", this[`fileList${event.name}`]);
            let fileListLen = this[`fileList${event.name}`].length;
            console.log("fileListLen", fileListLen);
            lists.map((item, index) => {
                this[`fileList${event.name}`].push({
                    ...item,
                    status: "uploading",
                    message: "上传中",
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url, lists, event);
                console.log("result", result);
                let item = this[`fileList${event.name}`][fileListLen];
                this[`fileList${event.name}`].splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: "success",
                        message: "",
                        url: result.url,
                        name: result.fileName,
                        ossId: result.ossId
                    })
                );
                fileListLen++;
            }
        },
        uploadFilePromise(url, lists, event) {
            let token = uni.getStorageSync('token')
            let headerToken = "Bearer " + token
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: baseUrl + "/resource/oss/upload",
                    filePath: url,
                    name: "file",
                    header: {
                        Authorization: headerToken,
                        clientId: "be7052a7e4f802c20df10a8d131adb12"
                    },
                    formData: {
                        user: "数字泛音谱",
                    },
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        console.log("data", data);
                        if (data.code == 200) {
                            resolve(data.data);
                        } else {
                            if (lists.length > 0) {
                                lists.map((item, index) => {
                                    this[`fileList${event.name}`].splice(index, 1)
                                });
                            }
                            uni.showToast({
                                title: data.msg,
                                icon: "none",
                            });
                        }
                    },
                });
            });
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/ .u-modal__content {
    display: unset !important;
}

.kf {
    position: absolute;
    bottom: 100rpx;
    right: 40rpx;
    z-index: 999;

    /deep/ .u-button--square {
        border-radius: 50rpx;
    }
}

.mine {
    background-color: #f5f5f5;
    height: 100vh;
    position: relative;

    .custom {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 40rpx;
        font-weight: bolder;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .main {
        padding: 0 10rpx;

        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png") no-repeat;
                background-size: 100% auto;
            }
        }
    }

    .index {
        padding: 30rpx;
        position: relative;
        z-index: 99;

        .info {
            font-size: 24rpx;
            color: #999999;
            display: flex;
            align-items: center;
        }

        .avatar {
            padding: 30rpx;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20rpx;

            .avatar-box {
                height: 50%;
                display: flex;
                margin-bottom: 20rpx;

                .userId {
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .phonenumber {
                        display: flex;
                        align-items: center;
                        font-weight: 700;
                    }
                }
            }

            .vip_box {
                background-color: #B79152;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
        }

        .order {
            margin-top: 30rpx;
            padding: 30rpx;
            background-color: #fff;
            border-radius: 20rpx;

            .kefu {
                margin: 20rpx 0 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .kefu-left {
                    display: flex;
                    align-items: center;
                    font-size: 30rpx;
                }
            }
        }

        .title {
            font-size: 30rpx;
            font-weight: 700;
            margin-bottom: 20rpx;
        }

        .grid-text {
            margin: 16rpx 0;
            font-size: 24rpx;
        }
    }

    .qrcode {
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .phone {
            display: flex;
            align-items: center;
        }

        .desc {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }
    }
}
</style>
